<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../static/css/mdui.min.css" crossorigin="anonymous" />
    <script src="../static/js/mdui.min.js" crossorigin="anonymous"></script>
    <script src="../static/js/http.js" crossorigin="anonymous"></script>
    <title>部门管理</title>
</head>

<header class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="welcome.html" class="mdui-typo-headline sys_name">HR系统</a>
        <a href="welcome.html" class="mdui-btn mdui-ripple mdui-btn-icon">
            <i class="mdui-icon material-icons">arrow_back</i>
        </a>

        <a href="" class="mdui-typo-title">部门管理</a>

        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:;" class="mdui-btn mdui-ripple mdui-btn-icon right_menu" style="margin-right: 1rem;"
            mdui-menu="{target: '#menu'}">
            <i class="mdui-icon material-icons">more_vert</i>

        </a>
        <ul class="mdui-menu" id="menu">
            <li class="mdui-divider"></li>
            <li class="mdui-menu-item">
                <a href="javascript:;" onclick="logout()" class="mdui-ripple">
                    <i class="mdui-icon material-icons">power_settings_new</i>
                    <text class="menu-item-text">退出</text>
                </a>
            </li>
        </ul>
    </div>
</header>


<body class="mdui-theme-primary-indigo mdui-theme-layout-auto mdui-theme-accent-indigo">

    <!-- <div class="mdui-row" style="position: absolute; top: 5rem;">
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">Email</label>
            <input class="mdui-textfield-input" type="email" />
        </div>
    </div> -->

    <div class="mdui-row row-layout" style="top: 13%;">
        <div class="mdui-col-xs-12">


            <div style="text-align: right; padding-bottom: 1rem;">
                <button class="mdui-btn mdui-color-green-800" onclick="location.href = 'dept_beforeadd'">添加</button>
            </div>


            <div class="mdui-row">
                <div class="mdui-col-sm-3">

                </div>
                <div class="mdui-col-sm-9">

                </div>
            </div>


            <div class="mdui-table-fluid">
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>名称</th>
                            <th>地点</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${list}" var="dept">
                            <tr>
                                <td id="id">${dept.id}</td>
                                <td id="name">${dept.name}</td>
                                <td id="loc">${dept.loc}</td>
                                <td>
                                    <button class="mdui-btn mdui-color-theme mdui-ripple"
                                            onclick="location.replace('dept_find?id=${dept.id}')">修改</button>
                                    <button class="mdui-btn mdui-color-red-600 mdui-ripple"
                                            onclick=" location.href =  'dept_delete?id=${dept.id}'">删除</button>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>

</body>

</html>

<script>
    function logout() {
        window.location.replace('../logout')
    }
</script>

<style>
    .menu-item-text {
        padding: 6px;
    }

    .mdui-col-xs-6 {
        margin-top: inherit;
    }

    .row-layout {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 15%;
    }

    .mdui-appbar {
        position: fixed;
        width: 100%;
    }

    .mdui-card {
        margin-bottom: 1rem;
    }

    .mdui-table thead tr th {
        font-size: large;
        color: black;
        font-weight: bold;
    }

    .mdui-table tbody tr td {
        font-size: medium;
        color: #000000a1;
        font-weight: bolder;
    }

    .mdui-table thead tr th {
        text-align: center
    }

    .mdui-table tbody tr td {
        text-align: center
    }
</style>